<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css" />
    <style type="text/css">
        div{
            background: green;
            width: 1000px;
            height:300px;
            margin: 0px auto;
            margin-bottom: 20px;
        }
        body{
            overflow-x:hidden;
        }
    </style>
</head>
<body>


<div class="wow slideInLeft" data-wow-duration="2s"></div>
<div class="wow bounce" data-wow-duration="2s"></div>
<div class="wow flash" data-wow-duration="2s"></div>
<div class="wow pulse" data-wow-duration="2s"></div>
<div class="wow rubberBand" data-wow-duration="2s"></div>
<div class="wow bounceInLeft" data-wow-duration="2s"></div>
<div class="wow bounceInRight" data-wow-duration="2s"></div>
<div class="wow bounceInUp" data-wow-duration="2s"></div>
<div class="wow fadeInLeft" data-wow-duration="2s"></div>
<!--

    data-wow-duration   动画持续时间
    data-wow-delay      动画延迟时间
    data-wow-offset
    data-wow-iteration

-->


<script type="text/javascript" src="wow.min.js"></script>
<script type="text/javascript">
var wow = new WOW({
    boxClass: 'wow',//需要执行动画的元素的 class
    animateClass: 'animated',//animation.css 动画的 class
    offset: 0,//距离可视区域多少开始执行动画
    mobile: true,//是否在移动设备上执行动画
    live: true//异步加载的内容是否有效
});
wow.init();
</script>
</body>
</html>